<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<title>归属地址信息管理</title>
<%@ include file="/common/meta.jsp"%>
<script src="${ctx}/js/jquery.js" type="text/javascript"></script>
<script src="${ctx}/js/jquery.form.js" type="text/javascript"></script>

<!-- include jqueryUi -->
<script src="${ctx}/js/jquery-ui-1.8.16.custom.min.js"
	type="text/javascript"></script>
<link href="${ctx}/css/jquery-ui-1.8.16.custom.css" type="text/css"
	rel="stylesheet" />
<script src="${ctx}/js/jquery-ui-timepicker-addon.js"
	type="text/javascript"></script>
<script src="${ctx}/js/jauery-ui-datepicker-zh-CN.js"
	type="text/javascript"></script>
<link href="${ctx}/css/jquery-ui-timepicker.css" type="text/css"
	rel="stylesheet" />
<script src="${ctx}/js/jQselect.js" type="text/javascript"></script>
<script src="${ctx}/js/yj_main.js" type="text/javascript"></script>
<script src="${ctx}/js/address.select.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/css/right.css"
	media="screen" />
<style>
.yj_table3 th,.yj_table3 td {
	padding: 3px 8px 3px 8px;
}
</style>
<script type="text/javascript">
	/**
	 * 清空查询条件
	 */
	$(function() {
		$("#clear").click(function() {
			$("#mobileNumber").val("");
			$("#areaCode").val("");
			$("#postCode").val("");

			var provinceSelect = document.getElementById("province");
			provinceSelect.selectedIndex = 0;

			var citySelect = document.getElementById("city");
			clearSelect(citySelect);
			citySelect.add(new Option("请选择城市...", ""));
		});
	});

	$(function() {
		$("#cancle").click(function() {
			$(".ui-icon").click();
		});
		
		$("#postCode").blur(function(){
			var inputValue = this.value;
			if(inputValue.length == 0){
				return ;
			}
			isRight = true;
			if(isNaN(inputValue)){
				alert("输入值要只能包含数字！");
				isRight = false;
			} else if(inputValue.length != 6){
				alert("格式不正确，当前的邮政编码为6为！");
				isRight = false;
			}
			if(!isRight){
				this.value = "";
				this.focus();
			}
			
		});
		
		$("#areaCode").blur(function(){
			var inputValue = this.value;
			if(inputValue.length == 0){
				return ;
			}
			isRight = true;
			if(isNaN(inputValue)){
				alert("输入值要只能包含数字！");
				isRight = false;
			}else if(inputValue.length > 4 || inputValue.length <=2){
				alert("输入格式不正确,当前长度为3-4位");
				isRight = false;
			}
			if(!isRight){
				this.value = "";
				this.focus();
			}
		});
	});

	function initProvince() {
		initProvinceSelect(document.getElementById("province"));
	}

	function changeProvince(selectedProvince) {
		initCitySelect(selectedProvince, document.getElementById("city"));
	}

	function submitForm() {
		var form = document.getElementById("queryForm");
		form.submit();
	}
</script>
</head>
<body onload="initProvince()">
	<form id="queryForm" name="queryForm" method="get"
		action="${ctx}/address/manage">
		<ul class="yj_formul2" style="width: 100%;">
			<li><label>所属省份：</label> <select id="province" name="province"
				onchange="changeProvince(this.value)" class="selectbox">
					<option selected="selected" value="">请选择省份...</option>
			</select></li>
			<li><label>所属城市：</label> <select id="city" name="city"
				class="selectbox">
					<option selected="selected" value="">请选择城市...</option>
			</select></li>
			<li><label>区号：</label> <input id="areaCode" name="areaCode"
				type="text" class="yj_othfld4" style="width: 130px;"></input></li>
			<li><label>邮政编码：</label> <input id="postCode" name="postCode"
				type="text" class="yj_othfld4" style="width: 130px;"></input></li>
			<li style="width: 60px; margin-left: 20px;"><a id="queryAddress"
				href="#" onclick="queryAddress()" class="yj_button2">查询</a></li>
			<li style="width: 60px; margin-left: 20px;"><a id="clear"
				href="#" class="yj_button2">清空</a></li>
		</ul>
	</form>

	<div class="clearfix"></div>
	<div class="yj_pannel2">
		<dl class="yj_top">
			<dt>
				<a id="addMobile" href="./addMobile.jsp" class="yj_addlink">新增</a>
			</dt>
			<dd></dd>
		</dl>
		<div class="yj_center">
			<table id="table" class="yj_table1">
				<thead>
					<tr>
						<th>所属省份</th>
						<th>所属城市</th>
						<th>区号</th>
						<th>邮政编码</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach var="address" items="${pagination}">
						<tr>
							<td><c:out value="${address.province}"></c:out></td>
							<td><c:out value="${address.city}"></c:out></td>
							<td><c:out value="${address.areaCode}"></c:out></td>
							<td><c:out value="${address.postCode}"></c:out></td>
							<td><a class="yj_editlink" href="./addressEdit.jsp"
								title="修改">修改</a> <a class="yj_dellink1" href="#" onclick="delAddress(${mobile.mobileNumberSegment})"
								title="删除">删除</a></td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</div>
		<dl class="yj_bottom">
			<dt></dt>
			<dd></dd>
		</dl>
		<div class="clearfix"></div>

		<div class="yj_pagelist">
			<a href="#" class="yj_pre">上一页</a> <a href="#">1</a> <a href="#">2</a>
			<a href="#">3</a> <a href="#">4</a> <a href="#">5</a> ... <a href="#"
				class="yj_next">下一页</a>
		</div>
	</div>
</body>
</html>
